<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/temp.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../js/china.js"></script>
    <script type="text/javascript" src="../../../js/flexible.js"></script>
</head>
<body style="font-size: 24px;">
<!-- 头部的盒子 -->
<header>
    <h1>数据展示</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    &
</header>

<!-- 页面主体部分 -->
<section class="mainbox">
    <div class="column">
        <div class="panel OD">
            <h2>待调整线路OD乘客出行人次分布</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>


</section>
<script>
    // 饼形图2 地区分布模块
    (function() {
        var myChart = echarts.init(document.querySelector(".OD .chart"));
        var option = {
            color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff",
                "#9fe6b8",
            ],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: "0%",
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "出行分布",
                    type: "pie",
                    radius: ["10%", "70%"],
                    center: ["50%", "50%"],
                    roseType: "radius",
                    // 图形的文字标签
                    label: {
                        fontSize: 10
                    },
                    // 链接图形和文字的线条
                    labelLine: {
                        // length 链接图形的线条
                        length: 6,
                        // length2 链接文字的线条
                        length2: 8
                    },
                    data: [
                        { value: 7.18, name: "岛内-岛内-非共线-非共线" },
                        { value: 12.89, name: "岛内-岛外-非共线-岛外" },
                        { value: 14.63, name: "岛内-岛内-共线-共线" },
                        { value: 15.19, name: "岛内-岛内-共线-非共线" },
                        { value: 19.09, name: "岛外-岛外" },
                        { value: 31.04, name: "岛内-岛外-共线-岛外" },
                    ]
                }
            ]
        };
        myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
</script>
</body>
</html>
